// A standalone theme for Rails Email Preview

$rep-brand-color: #4a90e2 !default
$rep-link-color: $rep-brand-color !default
$rep-gray: #818a91 !default
$rep-gray-light: #a6b2bb !default
$rep-gray-lighter: #f1f3f4 !default

$rep-breadcrumb-bg: $rep-gray-lighter !default

$rep-grid-gutter: 30px !default
$rep-grid-breakpoint-sm: 768px !default
$rep-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default
$rep-font-size-nav: 1.15em !default
$rep-text-color: #575d6b !default
$rep-text-color-secondary: #263238 !default

=rep--media-sm-plus
  @media (min-width: $rep-grid-breakpoint-sm)
    @content

=clearfix
  &::after
    content: ""
    display: table
    clear: both

%rep--link
  color: $rep-link-color
  text-decoration: none
  transition: color 0.1s linear
  &:active, &:focus, &:hover
    color: darken($rep-link-color, 15%)
  &:active
    outline: none
  &:focus
    outline: thin dotted
    outline: 5px auto -webkit-focus-ring-color
    outline-offset: -2px

%rep--hr
  margin-top: 20px
  margin-bottom: 20px
  border: 0
  border-top: 1px solid $rep-gray-lighter

.rep--main-container
  box-sizing: border-box
  color: $rep-text-color
  font-family: $rep-font-family
  *, *::before, *::after
    box-sizing: inherit
  a
    @extend %rep--link
  hr
    @extend %rep--hr

.rep--row
  margin-left: ($rep-grid-gutter / -2)
  margin-right: ($rep-grid-gutter / -2)
  +clearfix

%rep--row__col
  position: relative
  min-height: 1px
  padding-right: ($rep-grid-gutter / 2)
  padding-left: ($rep-grid-gutter / 2)

@each $col in (4, 6, 8)
  %rep--row__col-#{$col}
    @extend %rep--row__col
    +rep--media-sm-plus
      float: left
      width: percentage($col / 12)

.rep--email-headers
  @extend %rep--row__col-8

.rep--email-nav-container
  @extend %rep--row__col-4

.rep--email-list-half
  @extend %rep--row__col-6

.rep--breadcrumbs
  padding: 0.75rem 1rem
  margin-bottom: 1rem
  font-size: $rep-font-size-nav
  list-style: none
  background-color: $rep-breadcrumb-bg
.rep--breadcrumbs__breadcrumb
  display: inline-block
  + ::before
    display: inline-block
    padding: 0 0.5em
    color: $rep-gray-light
    content: "/"
.rep--breadcrumbs__breadcrumb-active
  display: inline-block

.rep--headers-list
  margin: 0
  dt
    color: $rep-text-color-secondary
    font-weight: bold
    +rep--media-sm-plus
      float: left
      clear: left
      margin-right: 0.4em
      text-align: right
      width: 4.8em
  dd
    width: auto
    margin-left: 0
    margin-bottom: 0.2em

.rep--btn
  appearance: none
  -webkit-font-smoothing: antialiased
  border: 1px solid
  cursor: pointer
  display: inline-block
  font-weight: 600
  padding: 0.75em 1em
  text-decoration: none
  user-select: none
  vertical-align: middle
  text-align: center
  white-space: nowrap
  transition: all .2s ease-in-out
  &:active, &.rep--btn-active
    background-image: none
    outline: 0
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
  &:focus
    outline: none

=rep--btn($color, $background, $border-color: darken($background, 5%))
  color: $color
  background: $background
  border-color: $border-color
  &:hover
    background: darken($background, 10%)
    border-color: darken($border-color, 12%)
  &:focus
    box-shadow: 0 0 3px $background
    background-color: darken($background, 17%)
    border-color: darken($border-color, 25%)

.rep--btn-default
  +rep--btn(#111, $rep-gray-lighter)

.rep--btn-primary
  +rep--btn(#fff, $rep-brand-color)

.rep--btn-danger
  +rep--btn(#fff, #d9534f)

.rep--btn-group
  .rep--btn + .rep--btn
    margin-left: -1px
  .rep--btn
    z-index: 1
    &.rep--btn-active
      z-index: 2
    &:focus, &:hover
      z-index: 3

.rep--list-group
  font-size: $rep-font-size-nav

.rep--list-group__item
  display: block
  padding: 1rem 1.5rem
  &:hover
    background-color: $rep-gray-lighter
    transition: background-color ease-in-out 0.15s, background-color ease-in-out 0.15s
  + .rep--list-group__item
    border-top: 1px solid $rep-gray-light

.rep--panel
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125)
  padding: 1.25rem
  margin-bottom: 1rem

.rep--email-options
  font-size: 0.875rem
  text-align: left
  p
    margin-top: 0
  +rep--media-sm-plus
    text-align: right

.rep--send-to-form
  display: block
  white-space: nowrap
  padding-bottom: 4px
  button, [type="email"]
    display: inline-block
    &:focus, &:active
      z-index: 2
  button
    line-height: 1.25
    padding: 0.5rem
  [type="email"]
    max-width: 135px
    padding: 0.5rem
    border-top-left-radius: 0
    border-bottom-left-radius: 0

.rep--form-control
  padding: 0.5rem 0.75rem
  line-height: 1.25
  background-image: none
  background-clip: padding-box
  border: 1px solid rgba(0, 0, 0, 0.15)
  border-radius: 0.25rem
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s
  &::placeholder
    color: #999
    opacity: 1
  &:focus
    border-color: lighten($rep-brand-color, 20%)
    outline: none
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)

.rep--footer
  text-align: center
  color: $rep-gray
